<template>
    <view class="form-item_map" :class="detail ? 'is-disabled' : ''" @click="getLocation">
        <view class="wrap">
            <view class="form-item_value">{{ formatAddress }}</view>
        </view>
    </view>
</template>

<script>
import { checkType } from '@/utils/index';
export default {
    name: 'FormItemMap',
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: String,
        },
        placeholder: {
            type: String,
            default: '请选择 地点'
        },
        detail: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        formatAddress() {
            if (!this.value) return this.placeholder
            if (checkType(this.value) === 'string') {
                return this.value.split(',')[2]
            } else if (checkType(this.value) === 'array') {
                return this.value[2];
            }
        }
    },
    methods: {
        async getLocation(e) {
            if (this.detail) return
            let location = await uni.getLocation({ type: 'gcj02' });
            uni.chooseLocation({
                longitude: location[1].longitude,
                latitude: location[1].latitude,
                success: (res) => {
                    console.log('位置名称：' + res.name);
                    console.log('详细地址：' + res.address);
                    console.log('纬度：' + res.latitude);
                    console.log('经度：' + res.longitude);
                    this.$emit('change', `${res.longitude},${res.latitude},${res.name}`)
                },
                complete: (e) => {
                    console.log(e);
                }
            });
        },
    }
}
</script>
<style scoped lang="scss">
.form-item_map {
    width: 100%;
    height: 100%;

    &.is-disabled {
        .wrap {
            border: none;
            color: #606266;
            background-color: #fff;
        }
    }

    .wrap {
        width: 100%;
        height: 100%;
        padding: 0 10rpx;
        display: flex;
        align-items: center;
        border: 2rpx solid #dcdfe6;
        color: #606266;
        background: #fff;
        border-radius: 8rpx;
        font-size: 26rpx;
        padding-left: 30rpx;
    }
}
</style>